<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
</head>
<script>
    function showData(jsonArray){
        //清空table
        var table = document.getElementById("tab");
        arr = table.getElementsByTagName("tr");
        //alart(arr.length);
        //不能用i++的方式去删除，双数行删不掉，删掉第一行的时候第二行变成第一行，下一次删的是第三行。
        //所以采用从最后开始的删除方法。
        for(var i=arr.length-1;i>0;i--){
            table.deleteRow(i);
        }

        var str = "";
        var length=jsonArray.length;
        for (var i=0;i<length;i++){
            str = "<tr><td><input type='checkbox' id="+ i +" /></td><td>"
                +jsonArray[i].initial_uid+"</td><td>"
                +jsonArray[i].rname+"</td><td>"
                +jsonArray[i].true_id+"</td><td>"
                +jsonArray[i].uname+"</td><td>"
                +jsonArray[i].completetime+"</td><td>"
                +jsonArray[i].error+"</td><td>"
                +jsonArray[i].tips+"</td><tr>"
                // + "<div><button type='button' id='updateBtn' >修改</button>" +
                // "<button type='button' id='deleteBtn' >删除</button></div>" +
                // "</td></tr>"
            $("#tab").append(str)
        }
    }
    $(function (){
        $.ajax({
            url:"/showAllCheck",
            type:"post",
            dataType:"json",
            success:function(jsonArray){
                showData(jsonArray);
            },
            error:function (msg){
                alert("展示所有盘点批次失败"+msg);
            }
        });

        //点击全选来全选
        $("#checkAll").click(function (){
            var code = document.getElementsByTagName("input");
            for (i=0;i<code.length;i++){
                if (code[i].type == 'checkbox'){
                    code[i].checked = true;
                }
            }
        })

        //点击取消来取消全选
        $("#unCheckAll").click(function (){
            var code = document.getElementsByTagName("input");
            for (i=0;i<code.length;i++){
                if (code[i].type == 'checkbox'){
                    code[i].checked = false;
                }
            }
        })
    })
</script>
<body>
<form class="content" id="cont2" action="/selectResourceByAll">

</form>
<button type="button" id="checkAll">全选</button>
<button type="button" id="unCheckAll">取消选择</button>
<table id="tab" border="1px" >
    <tr>
        <td width="20px"></td>
        <td width="60px">资产编号</td>
        <td width="60px">资产名称</td>
        <td width="60px">员工工号</td>
        <td width="60px">员工名</td>
        <td width="60px">结束时间</td>
        <td width="60px">盘点状态</td>
        <td width="100px">备注</td>
    </tr>
</table>
</body>
</html>